<!-- Dual Listbox start -->
<section class="basic-dual-listbox">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Basic Dual ListBox</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="form-group">
							<select multiple="multiple" size="10" class="duallistbox">
								<option value="1">Amsterdam</option>
								<option value="2">Antwerp</option>
								<option value="3" selected="selected">Athens</option>
								<option value="4">Barcelona</option>
								<option value="5">Berlin</option>
								<option value="6" selected="selected">Birmingham</option>
								<option value="7">Bradford</option>
								<option value="8">Bremen</option>
								<option value="9">Brussels</option>
								<option value="10" selected="selected">Bucharest</option>
								<option value="11">Budapest</option>
								<option value="12" selected="selected">Cologne</option>
								<option value="13" selected="selected">Copenhagen</option>
								<option value="14">Dortmund</option>
								<option value="15">Dresden</option>
								<option value="16" selected="selected">Dublin</option>
								<option value="17">Düsseldorf</option>
								<option value="18" selected="selected">Essen</option>
								<option value="19">Frankfurt</option>
								<option value="20">Genoa</option>
							</select>
							<p class="mt-1">Add <code>.duallistbox</code> class for basic dual listbox.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dual Listbox end -->



<!-- Dual Listbox Without Filter start -->
<section class="without-filter">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dual ListBox Without Filter</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="form-group">
							<select multiple="multiple" size="10" class="duallistbox-no-filter">
								<option value="1">Amsterdam</option>
								<option value="2">Antwerp</option>
								<option value="3" selected="selected">Athens</option>
								<option value="4">Barcelona</option>
								<option value="5">Berlin</option>
								<option value="6" selected="selected">Birmingham</option>
								<option value="7">Bradford</option>
								<option value="8">Bremen</option>
								<option value="9">Brussels</option>
								<option value="10" selected="selected">Bucharest</option>
								<option value="11">Budapest</option>
								<option value="12" selected="selected">Cologne</option>
								<option value="13" selected="selected">Copenhagen</option>
								<option value="14">Dortmund</option>
								<option value="15">Dresden</option>
								<option value="16" selected="selected">Dublin</option>
								<option value="17">Düsseldorf</option>
								<option value="18" selected="selected">Essen</option>
								<option value="19">Frankfurt</option>
								<option value="20">Genoa</option>
							</select>
							<p class="mt-1">Add <code>.duallistbox-no-filter</code> class without filter dual listbox.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dual Listbox Without Filter end -->



<!-- Dual ListBox with multiple selection start -->
<section class="with-multi-selection">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dual ListBox with multiple selection</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="form-group">
							<select multiple="multiple" size="10" class="duallistbox-multi-selection">
								<option value="1">Amsterdam</option>
								<option value="2">Antwerp</option>
								<option value="3" selected="selected">Athens</option>
								<option value="4">Barcelona</option>
								<option value="5">Berlin</option>
								<option value="6" selected="selected">Birmingham</option>
								<option value="7">Bradford</option>
								<option value="8">Bremen</option>
								<option value="9">Brussels</option>
								<option value="10" selected="selected">Bucharest</option>
								<option value="11">Budapest</option>
								<option value="12" selected="selected">Cologne</option>
								<option value="13" selected="selected">Copenhagen</option>
								<option value="14">Dortmund</option>
								<option value="15">Dresden</option>
								<option value="16" selected="selected">Dublin</option>
								<option value="17">Düsseldorf</option>
								<option value="18" selected="selected">Essen</option>
								<option value="19">Frankfurt</option>
								<option value="20">Genoa</option>
							</select>
							<p class="mt-1">Add <code>.duallistbox-multi-selection</code> class for Dual ListBox with Multiple Selection</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dual ListBox with multiple selection end -->



<!-- Dual ListBox with Filter Options start -->
<section class="with-filter-options">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dual ListBox with Filter Options</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="form-group">
							<select multiple="multiple" size="10" class="duallistbox-with-filter">
								<option value="1">Amsterdam</option>
								<option value="2">Antwerp</option>
								<option value="3" selected="selected">Athens</option>
								<option value="4">Barcelona</option>
								<option value="5">Berlin</option>
								<option value="6" selected="selected">Birmingham</option>
								<option value="7">Bradford</option>
								<option value="8">Bremen</option>
								<option value="9">Brussels</option>
								<option value="10" selected="selected">Bucharest</option>
								<option value="11">Budapest</option>
								<option value="12" selected="selected">Cologne</option>
								<option value="13" selected="selected">Copenhagen</option>
								<option value="14">Dortmund</option>
								<option value="15">Dresden</option>
								<option value="16" selected="selected">Dublin</option>
								<option value="17">Düsseldorf</option>
								<option value="18" selected="selected">Essen</option>
								<option value="19">Frankfurt</option>
								<option value="20">Genoa</option>
							</select>
							<p class="mt-1">Add <code>.duallistbox-with-filter</code> class for basic dual listbox.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dual ListBox with Filter Options end -->



<!-- Dual ListBox with Filter Text Options start -->
<section class="with-filter-text-options">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dual ListBox with Filter Text Options</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="form-group">
							<select multiple="multiple" size="10" class="duallistbox-custom-text">
								<option value="option1">Option 1</option>
								<option value="option2" selected="selected">Option 2</option>
								<option value="option3" selected="selected">Option 3</option>
								<option value="option4">Option 4</option>
								<option value="option5">Option 5</option>
								<option value="option6" selected="selected">Option 6</option>
								<option value="option7" selected="selected">Option 7</option>
								<option value="option8">Option 8</option>
								<option value="option9">Option 9</option>
								<option value="option0">Option 10</option>
							</select>
							<p class="mt-1"> All the listbox labels and placeholders are fully editable through specified options, Like: <code>filterTextClear, filterPlaceHolder, infoText, infoTextFiltered, infoTextEmpty</code>. You can use custom language also.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dual ListBox with Filter Text Options end -->



<!-- Dual ListBox with Minimal Height start -->
<section class="with-minimal-height">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dual ListBox with Minimal Height</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="form-group">
							<select multiple="multiple" size="10" class="duallistbox-custom-height">
								<option value="1">Amsterdam</option>
								<option value="2">Antwerp</option>
								<option value="3" selected="selected">Athens</option>
								<option value="4">Barcelona</option>
								<option value="5">Berlin</option>
								<option value="6" selected="selected">Birmingham</option>
								<option value="7">Bradford</option>
								<option value="8">Bremen</option>
								<option value="9">Brussels</option>
								<option value="10" selected="selected">Bucharest</option>
								<option value="11">Budapest</option>
								<option value="12" selected="selected">Cologne</option>
								<option value="13" selected="selected">Copenhagen</option>
								<option value="14">Dortmund</option>
								<option value="15">Dresden</option>
								<option value="16" selected="selected">Dublin</option>
								<option value="17">Düsseldorf</option>
								<option value="18" selected="selected">Essen</option>
								<option value="19">Frankfurt</option>
								<option value="20">Genoa</option>
							</select>
							<p class="mt-1">Use <code>selectorMinimalHeight</code> setting option to set dual listbox custom height.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dual ListBox with Minimal Height end -->



<!-- Dual ListBox Custom Options start -->
<section class="with-custom-options">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Add Custom Options to Dual ListBox</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="form-group">
							<select multiple="multiple" size="10" class="duallistbox-dynamic">
								<option value="1">Amsterdam</option>
								<option value="2">Antwerp</option>
								<option value="3" selected="selected">Athens</option>
								<option value="4">Barcelona</option>
								<option value="5">Berlin</option>
								<option value="6" selected="selected">Birmingham</option>
								<option value="7">Bradford</option>
								<option value="8">Bremen</option>
								<option value="9">Brussels</option>
								<option value="10" selected="selected">Bucharest</option>
								<option value="11">Budapest</option>
								<option value="12" selected="selected">Cologne</option>
								<option value="13" selected="selected">Copenhagen</option>
								<option value="14">Dortmund</option>
								<option value="15">Dresden</option>
								<option value="16" selected="selected">Dublin</option>
								<option value="17">Düsseldorf</option>
								<option value="18" selected="selected">Essen</option>
								<option value="19">Frankfurt</option>
								<option value="20">Genoa</option>
								<option value="21">Glasgow</option>
								<option value="22">Gothenburg</option>
								<option value="23" selected="selected">Hamburg</option>
								<option value="24">Hannover</option>
								<option value="25">Helsinki</option>
							</select>
						</div>
						<div class="buttons block">
							<button type="button" class="btn btn-info duallistbox-add">Add options</button>
							<button type="button" class="btn btn-info duallistbox-add-clear">Add with clearing highlights</button>
						</div>
						<p class="mt-1"> Add an option to the Listbox Using <code>Add Options</code> button. Add an option and also clearing highlights of listbox option using <code>Add with clearing highlight</code> button</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dual ListBox Custom Options end -->